<template>
  <div class="show_more_text">
    <div ref="textDom" class="text_content">{{ text }}</div>
    <div class="more_btn" v-if="showMore" @click="showMoreText(!showStatus)">
      <span v-if="!showStatus">展开</span>
      <span v-else>收起</span>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";

defineProps({
  text: { type: String, default: "" }
});

const textDom = ref();
const showMore = ref(false);
const showStatus = ref(false);

const showMoreText = flag => {
  showStatus.value = flag;

  if (flag) {
    textDom.value.classList.remove("ellips");
    textDom.value.classList.add("expand");
  } else {
    textDom.value.classList.remove("expand");
    textDom.value.classList.add("ellips");
  }
};

onMounted(() => {
  if (textDom.value.scrollWidth > textDom.value.offsetWidth) {
    textDom.value.classList.add("ellips");
    showMore.value = true;
  }
});
</script>
<style lang="scss" scoped>
.show_more_text {
  display: flex;
  gap: 10px;
  width: 100%;
  .text_content {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .ellips {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .expand {
    width: 100%;
    overflow: visible;
    white-space: wrap;
  }
  .more_btn {
    white-space: nowrap;
    cursor: pointer;
    margin-right: 22px;
    color: #007DFF;
  }
}
</style>
